<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <c:set value="${pageContext.request.contextPath}" var="path"></c:set>
    <link rel="stylesheet" href="${path}/layui/css/layui.css">
    <link rel="stylesheet" href="${paht}/layui/css/formSelects.css">
    <script src="${path}/js/jquery.min.js"></script>
    <script src="${path}/layui/layui.all.js"></script>
</head>
<body>
<div class="layui-container">
    <h2>列表</h2>
    <hr>
    <div class="layui-row">
        <form class="layui-form" action="">
            <div class="layui-inline">
                <label class="layui-form-label">名称：</label>
                <div class="layui-inline">
                    <input type="text" id="name" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">年级：</label>
                <div class="layui-inline" style="width: 300px">
                    <select name="grade" id="grade">
                        <option value="-1">全部</option>
                        <c:forEach items="${gradeList}" var="grade">
                            <option value="${grade.id}">${grade.gradeName}</option>
                        </c:forEach>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-inline">
                    <button class="layui-btn layui-btn-sm" type="button" onclick="load();">搜索</button>
                </div>
            </div>
        </form>
        <div class="layui-col-sm12">
            <table class="layui-table" id="strTable" lay-filter="strTable"></table>
        </div>
    </div>
</div>
<script>
    function load(){
        layui.table.reload('strTable',{
            page:{
                curr:1
            },
            where:{
                name:$("#name").val(),
                gid:$("#grade").val()
            }
        })
    }
    layui.use(['table','form'],function () {
        var table = layui.table;
        var form = layui.form;


        form.render();

        //渲染
        table.render({
            elem:'#strTable',
            url:'/Str/list',
            page:true,
            even:true,
            sort:true,
            skin: 'line',
            cols:[[
                {field:'id', width:80, title: '编号', sort: true},
                {field:'name', title: '策略名称'},
                {field:'lala',title:'年级',templet:function (d) {
                        return d.grade.gradeName;
                    }},
                {field:'state',title:'是否公开',templet:function (d) {
                        if(d.state == 0){
                            return '是'
                        }else{
                            return '否'
                        }
                    }},
                {field:'lala',title:'操作',toolbar:"#BerDemo"}
            ]]
        })


        //监听行工具
        table.on("tool(strTable)",function (obj) {
            var data = obj.data; //当前行的数据
            var e = obj.event;
            if(e == "del"){
                layer.confirm("确定要删除吗？",function (index) {
                    $.post("${path}/Str/del",{id:obj.data.id},function () {
                        layer.msg("删除成功！！");
                        table.reload("strTable");
                    })
                })
            }else if(e == "edit"){
                $.get('${path}/Str/form',function (str) {
                    $.get('${path}/Str/getOne',{id:data.id},function (data) {
                        layer.open({
                            type:1,
                            title : '修改',
                            area:'800px',
                            maxmin:true,
                            skin : 'layui-layer-molv',
                            content : str,
                            btn : ['确定','取消'],
                            success:function () {
                                form.val("form1",data)
                            }
                        })
                    })
                })
            }
        })

    })
</script>
<script type="text/html" id="BerDemo">
    <a href="javascript:void(0)" lay-event="edit"><i class="layui-icon layui-icon-edit"></i> </a>
    <a href="javascript:void(0)" lay-event="del"><i class="layui-icon layui-icon-delete"></i></a>
</script>
</body>
</html>
